<template>
    <view class="result" :class="{'correct-result': isCorrect}" v-if='isAlreadySubmission'>
        <template v-if='isCorrect'>
            <view class="c-flex_column c-align_center c-justify_center">
                <uni-icons type='checkbox-filled' color="#31ed50" size="30"></uni-icons>
            </view>
            <view class="title">真棒，你答对了！</view>
        </template>
        <template v-else>
            <view class="c-flex_column c-align_center c-justify_center">
                <uni-icons type='clear' color="#ff4747" size="30"></uni-icons>
            </view>
            <view class="title">诶呀，要再试一次吗</view>
        </template>
    </view>
</template>

<script>
    export default {
        props: {
            isAlreadySubmission: {
                type: Boolean,
                default: false
            },
            isCorrect: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
    .result {
        position: fixed;
        right: 0;
        bottom: 300rpx;

        display: flex;
        flex-direction: row;
        align-items: center;

        padding: 15rpx 25rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-top-left-radius: 55rpx;
        border-bottom-left-radius: 55rpx;

        background: #ffeae6;
        color: #ff4747;

        .title {
            margin-left: 15rpx;
        }
    }

    .correct-result {
        background: #d2fddd;
        color: #31ed50;
    }
</style>